<template>
  <div class="rightArea">
    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="评论" name="first">
        <div class="comment">
          <el-scrollbar height="100%">
            <li v-for="(item,i) in comments" :key="item.userName" :ref="i==comments.length-1?'scrollBar':''">
              <div>
                <el-avatar :icon="item.awatar"></el-avatar>
                <span class="name">{{item.name}}</span>
                <span class="publishTime">{{item.publishTime}}</span>
              </div>
              <p>{{item.publishContent}}</p>
            </li>
          </el-scrollbar>
        </div>
        <div class="input">
          <el-input
            size="small"
            v-model.trim="comment"
            @keydown.enter.stop ="publish(false,$event)"
            placeholder="发布评论（按Ctrl+Enter发送）"
            clearable
          ></el-input>
          <el-button size="small" type="primary" v-if="comment" @click="publish(true,$event)">发 送</el-button>
        </div>
      </el-tab-pane>

      <el-tab-pane label="开发" name="second">
        <el-scrollbar height="100%">
          <li v-for="(item, index) in dynamic" :key="item.developStatus">
            <span class="developStatus" :class="{blueColor: index === dynamic.length - 1}">{{item.developStatus}}</span>
            <div class="progress">
              <div class="cricle" :class="{blueBackground: index === dynamic.length - 1}"></div>
              <div class="line" :class="{blueBackground: index === dynamic.length - 1}"></div>
            </div>
            <span class="developTime">
              <i>{{item.developTime}}</i>
            </span>
          </li>
        </el-scrollbar>
      </el-tab-pane>

      <el-tab-pane label="评审" name="third" v-if="type < 4">
        <el-scrollbar height="100%">
          <li v-for="(item, i) in reviews" :key="item.reviewStatus">
            <span class="developStatus" :class="{blueColor: currentStatusIndex2>=i}">{{item.reviewStatus}}</span>
            <div class="progress">
              <div class="cricle" :class="{blueBackground: currentStatusIndex2>=i}"></div>
              <div class="line" :class="{blueBackground: currentStatusIndex2>i}"></div>
            </div>
            <span class="reviewTime">
              <span>{{item.reviewer}} {{item.reviewTime}}</span>
              <br>
              <span>{{item.reviewContent}}</span>
            </span>
          </li>  
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, nextTick, onMounted, watch } from 'vue'
  import moment from "moment";
  import {useStore} from 'vuex'
  import {addCommentApi, commentListApi, typeHistoryApi} from '@/api/System/project'
  import { searchUserApi } from "@/api/System/user";
  import { ElMessage } from 'element-plus';
  export default defineComponent({
    props: {
      type: Number,
      topicId: Number,
    },
    setup (props) {
      const store = useStore();
      const state = reactive({
        topicType: 1,
        topicId: props.topicId,
        activeName: 'first',
        comment: '',
        // 评论消息
        comments: [],

        // 开发动态
        dynamic: [],

        // 评审动态
        reviews: [
          {
            reviewer: '张三',
            reviewStatus: '新建需求',
            reviewTime: '2021/06/12 09:45:32',
            reviewContent: '审批意见记录'
          },
          {
            reviewer: '张三',
            reviewStatus: '修改',
            reviewTime: '2021/06/28 13:30:37',
            reviewContent: '审批意见记录'
          },
          {
            reviewer: '张三',
            reviewStatus: '评审中',
            reviewTime: '2021/08/13 11:12:13',
            reviewContent: '审批意见记录'
          },
          {
            reviewer: '张三',
            reviewStatus: '已评审',
            reviewTime: '2021/08/28 17:30:56',
            reviewContent: '审批意见记录'
          },
          {
            reviewer: '张三',
            reviewStatus: '新建需求',
            reviewTime: '2021/06/12 09:45:32',
            reviewContent: '审批意见记录'
          },
          {
            reviewer: '张三',
            reviewStatus: '修改',
            reviewTime: '2021/06/28 13:30:37',
            reviewContent: '审批意见记录'
          },
          {
            reviewer: '张三',
            reviewStatus: '评审中',
            reviewTime: '2021/08/13 11:12:13',
            reviewContent: '审批意见记录'
          },
          {
            reviewer: '张三',
            reviewStatus: '已评审',
            reviewTime: '2021/08/28 17:30:56',
            reviewContent: '审批意见记录'
          },
          {
            reviewer: '张三',
            reviewStatus: '新建需求',
            reviewTime: '2021/06/12 09:45:32',
            reviewContent: '审批意见记录'
          },
          {
            reviewer: '张三',
            reviewStatus: '修改',
            reviewTime: '2021/06/28 13:30:37',
            reviewContent: '审批意见记录'
          },
          {
            reviewer: '张三',
            reviewStatus: '评审中',
            reviewTime: '2021/08/13 11:12:13',
            reviewContent: '审批意见记录'
          },
          {
            reviewer: '张三',
            reviewStatus: '已评审',
            reviewTime: '2021/08/28 17:30:56',
            reviewContent: '审批意见记录'
          },
        ],
        // 当前所处于的开发状态
        currentStatus1: '开发中',

        // 当前所处于的评审状态
        currentStatus2: '评审中',

        allUsers: [],
      })

      let currentStatusIndex1 = ref(null);
      state.dynamic.forEach((item,index)=> {
        if(item.developStatus == state.currentStatus1){
          currentStatusIndex1.value = index;
        }
      })

      let currentStatusIndex2 = ref(null);
      state.reviews.forEach((item,index)=> {
        if(item.reviewStatus == state.currentStatus2){
          currentStatusIndex2.value = index;
        }
      })

      const scrollBar = ref(null);

      // 获取所有的用户,来匹配用户姓名
      const getAllusers = ()=> {
        searchUserApi({pageSize: 500}).then((res:any)=>{
          if(res.code == 0) {
            state.allUsers.length = 0;
            res.data.list.forEach((item:any)=>{
              state.allUsers.push({
                id: item.id,
                name: item.name,
              });
            })
            renderConmentList();
          }
        });  
      }
      getAllusers();

      const renderConmentList = ()=> {  
        if(!state.topicId) {
          return false;
        }
        commentListApi({
          topicId: state.topicId,
          topicType: state.topicType
          }).then((res:any)=>{
          if(res.code == 0) {
            state.comments.length = 0;
            res.data.forEach((item:any)=>{
              let obj:any = {};
              obj.awatar = item?.awatar || 'el-icon-user-solid';
              state.allUsers.forEach(it=>{
                if(it.id == item.fromUid){
                  obj.name = it.name;
                }
              })
              obj.publishTime = moment(item.createTime).format('YYYY/MM/DD HH:mm');
              obj.publishContent = item.content;
              state.comments.push(obj);
            }) 
          }else {
            ElMessage.error(res.message)
          }
        })
      }
      // renderConmentList();

      const publish = (button:boolean,event:any)=> {
        if(!state.topicId) {
          return false;
        }
        if( event.ctrlKey && event.keyCode == 13 || button) {
          // 调发布评论接口
          addCommentApi({
            topicId: state.topicId,
            topicType: state.topicType,
            contentType: 1,
            content: state.comment
          }).then((res:any)=>{
            if(res.code == 0) {
              state.comment = '';
              renderConmentList();
              setTimeout(()=>{
                nextTick(()=>{
                  if(state.comments?.length) {
                    scrollBar.value.scrollIntoView();
                  }
                })
              },50) 
            }else {
              ElMessage.error(res.message)
            }
          })
        }
      }

      const handleClick = (tab:any, event:any)=> {
        state.activeName = tab.props.name;
        if(state.activeName == 'first') {
          nextTick(()=>{
            if(state.comments?.length) {
              scrollBar.value.scrollIntoView();
            }
          })
        }   
      }

      // 获取历史状态
      const getHistoryType = async () => {
        if(!state.topicId) return
        const res = await typeHistoryApi({
          id: state.topicId
        })
        // @ts-ignore
        if(res.code === '0') {
          state.dynamic.length = 0
          if(res.data.length > 0) {
            res.data.forEach(item => {
              state.dynamic.push({
                developStatus: item.historicalStatus,
                developTime: item.updateTime,
              })
            });
          }
        }
      }


      getHistoryType()

      return {
        ...toRefs(state),
        currentStatusIndex1,
        currentStatusIndex2,
        scrollBar,
        publish,
        handleClick,
      }
    }
  })
</script>

<style lang="scss" scoped>
  .rightArea {
    height: 100%;
    .el-tabs {
      height: 100%;
    }
    :deep(.el-tabs__header) {
      margin: 0;
      .el-tabs__nav {
        display: flex;
        width: 100%;
        .el-tabs__active-bar {
          display: none;
        }
        justify-content: space-around;
        .el-tabs__item {
          padding: 0;
          &.is-active {
            border-bottom: 2px solid #409eff;
          }
        } 
      }   
    }
    :deep(.el-tabs__content) {
      height: calc(100% - 40px);
      #pane-first { 
        height: 100%;
        .comment {
          height: calc(100% - 114px);
          li {
            margin-top: 25px;
            padding: 0 8px;
            div {
              display: flex;
              .el-avatar {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 20px;
                height: 20px;
                margin-right: 8px;
              }
              .name {
                flex: 1;
                font-size: 14px;
                color: #333;
              }
              .publishTime {
                margin-right: 7px;
                color: #999;
              }
            }
            p {
              margin-top: 8px;
              color: rgba($color: #000000, $alpha: 0.65);
            }
          }
        }
        .input {
          height: 114px;
          text-align: right;
          padding: 10px 32px 24px;
          .el-button {
            margin-top: 16px;
          }
          .el-input {
            text-align: left;
          }
          input {
            border-radius: 2px;
          }
        }
      }
      #pane-second, #pane-third {
        height: 100%;
        padding: 13px 8px;
        li {
          display: flex;
          .developStatus {
            flex: 1;
            text-align: right;
            color: #333;
            &.blueColor {
              color: #4091FD;
            }
          }
          .developTime {
            flex: 1.4;
            color: #333;
            i {
              display: inline-block;
              width: 80px;
              font-style: normal;
              line-height: 24px;
            }
          }
          .reviewTime {
            flex: 2.5;
            color: #333;
          }
          .progress {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 8px 11px;
            .cricle {
              width: 16px;
              height: 16px;
              background-color: rgba(0,0,0,.25);
              border-radius: 50%;
              &.blueBackground {
                background-color: #4091FD;
              }
            }
            .line {
              width: 1px;
              height: 32px;
              background-color: #E8E8E8;
              margin-top: 4px;
              &.blueBackground {
                background-color: #4091FD;
              }
            }
          }
          &:last-child {
            .line {
              opacity: 0;
            }
          }
        } 
      }
    }   
  }
</style>